<template>
  <div v-dialogDrag>
    <el-dialog
      title="导入运价"
      v-model="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        size="small"
        label-width="100px"
        :rules="rules"
        ref="ruleFormRef"
        label-position="right"
      >
        <el-form-item label="政策号" prop="policyNo">
          <el-input
            placeholder="请输入政策号"
            v-model="ruleForm.policyNo"
          ></el-input>
        </el-form-item>
        <el-form-item label="政策名称" prop="policyName">
          <el-input
            placeholder="请输入政策名称"
            v-model="ruleForm.policyName"
          ></el-input>
        </el-form-item>
        <el-form-item label="政策有效期" prop="date">
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="ruleForm.date"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="适用代理" prop="agentCodes">
          <el-select
            clearable
            multiple
            collapse-tags
            v-model="ruleForm.agentCodes"
            placeholder="请选择适用代理"
          >
            <el-option
              v-for="item in selectArr"
              :key="item.agentCode"
              :value="item.agentCode"
              >{{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            placeholder="请输入备注"
            v-model="ruleForm.remark"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传附件" prop="file">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="fileList"
            :on-change="handleSuccess"
            :auto-upload="false"
          >
            <el-button size="small" type="success">选取上传文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <div class="flex justify-end">
            <el-button :loading="isLoading" type="primary" @click="handleOk"
              >提交</el-button
            >
            <el-button @click="handleClose">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { ElForm, ElMessage } from 'element-plus'
import { rules } from '@/views/rariffMaintenance/Basics/cpn/config/import-config'
import { $select } from '@/service/common'
import { dayFormat, toFormData } from '@/assets/common'
import { $rariff } from '@/service/rariffMaintenance'

export default defineComponent({
  name: 'ImportFreight',
  emits: ['handleClose'],
  setup(props, { emit }) {
    const dialogVisible = ref(true)
    const isLoading = ref(false)

    // region 用户输入文本
    const ruleFormRef = ref<InstanceType<typeof ElForm>>()
    const fileList = ref([])
    const ruleForm = reactive({
      policyNo: '',
      policyName: '',
      date: [],
      agentCodes: [],
      remark: '',
      file: {},
      startDate: '',
      endDate: ''
    })
    // endregion

    // region 下拉框数据
    const selectArr = ref()
    onMounted(async () => {
      try {
        const { code, data, message } = await $select.selectByAirline()
        if (code !== 200) ElMessage.error(message)
        data.unshift({ agentCode: 'ALL', name: '全部' })
        selectArr.value = data
      } catch (e) {
        ElMessage.error(e.message)
      }
    })
    // endregion

    // 文件上传
    const handleSuccess = (response: any) => {
      ruleForm.file = response.raw
      fileList.value = []
      ;(fileList.value as any[]).push(response)
    }
    const handleClose = () => {
      emit('handleClose')
    }

    // region 导入确认
    const handleOk = () => {
      ruleFormRef.value?.validate(async (flag) => {
        if (!flag) return
        isLoading.value = true
        const { date } = ruleForm
        ruleForm.startDate = dayFormat(date[0], 'YYYY-MM-DD')
        ruleForm.endDate = dayFormat(date[1], 'YYYY-MM-DD')
        Reflect.deleteProperty(ruleForm, 'date')
        try {
          const { code, message } = await $rariff.importExcel(
            toFormData(ruleForm)
          )
          isLoading.value = false
          if (code !== 200) return ElMessage.error(message)
          ElMessage.success(message)
          emit('handleClose', true)
        } catch (e) {
          console.log(e)
        }
      })
    }
    // endregion
    return {
      dialogVisible,
      ruleFormRef,
      rules,
      ruleForm,
      isLoading,
      fileList,
      selectArr,
      handleClose,
      handleSuccess,
      handleOk
    }
  }
})
</script>

<style scoped></style>
